﻿@page "/content/table"

<Pager Title="Table" Indicates="@(new[]{"Example","Colored","Striped","Hoverable rows","Active tables","Bordered tables",
"Tables without borders","Small tables","Vertical alignment","Captions","Responsive tables"})">
	<h3>
		How to work
	</h3>
	<Paragraph CssClass="@Css.Class.Lead()">
		<UnorderedList>
			<ListItem>Use <code>TableRow</code> instead of <code>tr</code> for table row if you want to use bootstrap css from component.</ListItem>
		</UnorderedList>
	</Paragraph>
		<Demo Title="Example">
		<Description>
			Use <code>Table</code> component instead of <code>table</code> element.
		</Description>
		<Run>
			<Table>
				<HeadContent>
					<TableRow>
						<TableHead>#</TableHead>
						<TableHead>First</TableHead>
						<TableHead>Last</TableHead>
						<TableHead>Handle</TableHead>
					</TableRow>
				</HeadContent>
				<ChildContent>
					<TableRow>
						<TableHead>1</TableHead>
						<TableCell>Mark</TableCell>
						<TableCell>Otto</TableCell>
						<TableCell>@@mdo</TableCell>
					</TableRow>
					<TableRow>
						<TableHead>2</TableHead>
						<TableCell>Jacob</TableCell>
						<TableCell>Thornton</TableCell>
						<TableCell>@@fat</TableCell>
					</TableRow>
					<TableRow>
						<TableHead>3</TableHead>
						<TableCell ColSpan="2">Larry Bird</TableCell>
						<TableCell>@@twitter</TableCell>
					</TableRow>
				</ChildContent>
				<FootContent>
					<TableRow>
						<TableCell CssClass="Css.Text(Text.End)" ColSpan="4">
							Total : 3
						</TableCell>
					</TableRow>
				</FootContent>
			</Table>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Table>
	<HeadContent>
		<TableRow>
			<TableHead>#</TableHead>
			<TableHead>First</TableHead>
			<TableHead>Last</TableHead>
			<TableHead>Handle</TableHead>
		</TableRow>
	</HeadContent>
	<ChildContent>
		<TableRow>
			<TableHead>1</TableHead>
			<TableCell>Mark</TableCell>
			<TableCell>Otto</TableCell>
			<TableCell>@@mdo</TableCell>
		</TableRow>
		<TableRow>
			<TableHead>2</TableHead>
			<TableCell>Jacob</TableCell>
			<TableCell>Thornton</TableCell>
			<TableCell>@@fat</TableCell>
		</TableRow>
		<TableRow>
			<TableHead>3</TableHead>
			<TableCell ColSpan=""2"">Larry Bird</TableCell>
			<TableCell>@@twitter</TableCell>
		</TableRow>
	</ChildContent>
	<FootContent>
		<TableRow>
			<TableCell CssClass=""Css.Text(Text.End)"" ColSpan=""4"">
				Total : 3
			</TableCell>
		</TableRow>
	</FootContent>
</Table>
```
			")
		</Code>
	</Demo>
		<Demo Title="Colored">
		<Description>
			Set <code>Color</code> to color tables, table rows or individual cells.
		</Description>
		<Run>
			<Table>
				<HeadContent>
					<TableRow>
						<TableHead>Color</TableHead>
						<TableHead>Heading</TableHead>
						<TableHead>Heading</TableHead>
					</TableRow>
				</HeadContent>
				<ChildContent>
					<TableRow>
						<TableCell>Default</TableCell>
						<TableCell>Cell</TableCell>
						<TableCell>Cell</TableCell>
					</TableRow>					
					<TableRow Color="Color.Primary">
						<TableCell>Primary</TableCell>
						<TableCell>Cell</TableCell>
						<TableCell>Cell</TableCell>
					</TableRow>					
					<TableRow Color="Color.Secondary">
						<TableCell>Secondary</TableCell>
						<TableCell>Cell</TableCell>
						<TableCell>Cell</TableCell>
					</TableRow>					
					<TableRow Color="Color.Info">
						<TableCell>Info</TableCell>
						<TableCell>Cell</TableCell>
						<TableCell>Cell</TableCell>
					</TableRow>					
					<TableRow Color="Color.Success">
						<TableCell>Success</TableCell>
						<TableCell>Cell</TableCell>
						<TableCell>Cell</TableCell>
					</TableRow>					
					<TableRow Color="Color.Danger">
						<TableCell>Danger</TableCell>
						<TableCell>Cell</TableCell>
						<TableCell>Cell</TableCell>
					</TableRow>
					<TableRow Color="Color.Light">
						<TableCell>Light</TableCell>
						<TableCell>Cell</TableCell>
						<TableCell>Cell</TableCell>
					</TableRow>
					<TableRow Color="Color.Dark">
						<TableCell>Dark</TableCell>
						<TableCell>Cell</TableCell>
						<TableCell>Cell</TableCell>
					</TableRow>
				</ChildContent>
			</Table>
		</Run>
		<Code>
			@MD.Write(@"
```html
<!--On tables-->
<Table Color=""Color.Primary"">
...
</Table>

<!--On rows-->
<TableRolw Color=""Color.Success"">
...
</TableRow>

<!--On cells-->
<TableRolw>
	<TableCell Color=""Color.Dark"">...</TableCell>
	<TableHead Color=""Color.Danger"">...</TableHead>
</TableRow>
```
			")
		</Code>
	</Demo>
	<Demo Title="Striped">
		<Description>
			To add zebra-striping to any table row.
		</Description>
		<Run>
			<Table Striped>
				<HeadContent>
					<TableRow>
						<TableHead>#</TableHead>
						<TableHead>First</TableHead>
						<TableHead>Last</TableHead>
						<TableHead>Handle</TableHead>
					</TableRow>
				</HeadContent>
				<ChildContent>
					<TableRow>
						<TableHead>1</TableHead>
						<TableCell>Mark</TableCell>
						<TableCell>Otto</TableCell>
						<TableCell>@@mdo</TableCell>
					</TableRow>
					<TableRow>
						<TableHead>2</TableHead>
						<TableCell>Jacob</TableCell>
						<TableCell>Thornton</TableCell>
						<TableCell>@@fat</TableCell>
					</TableRow>
					<TableRow>
						<TableHead>3</TableHead>
						<TableCell ColSpan="2">Larry Bird</TableCell>
						<TableCell>@@twitter</TableCell>
					</TableRow>
				</ChildContent>
				<FootContent>
					<TableRow>
						<TableCell CssClass="Css.Text(Text.End)" ColSpan="4">
							Total : 3
						</TableCell>
					</TableRow>
				</FootContent>
			</Table>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Table Striped>
...
</Table>
```
			")
		</Code>
	</Demo>
	
	<Demo Title="Hoverable rows">
		<Description>
			To enable a hover state on table rows.
		</Description>
		<Run>
			<Table Hover>
				<HeadContent>
					<TableRow>
						<TableHead>#</TableHead>
						<TableHead>First</TableHead>
						<TableHead>Last</TableHead>
						<TableHead>Handle</TableHead>
					</TableRow>
				</HeadContent>
				<ChildContent>
					<TableRow>
						<TableHead>1</TableHead>
						<TableCell>Mark</TableCell>
						<TableCell>Otto</TableCell>
						<TableCell>@@mdo</TableCell>
					</TableRow>
					<TableRow>
						<TableHead>2</TableHead>
						<TableCell>Jacob</TableCell>
						<TableCell>Thornton</TableCell>
						<TableCell>@@fat</TableCell>
					</TableRow>
					<TableRow>
						<TableHead>3</TableHead>
						<TableCell ColSpan="2">Larry Bird</TableCell>
						<TableCell>@@twitter</TableCell>
					</TableRow>
				</ChildContent>
				<FootContent>
					<TableRow>
						<TableCell CssClass="Css.Text(Text.End)" ColSpan="4">
							Total : 3
						</TableCell>
					</TableRow>
				</FootContent>
			</Table>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Table Hover>
...
</Table>
```
			")
		</Code>
	</Demo>
	<Demo Title="Active tables">
		<Description>
			Highlight a table row or cell.
		</Description>
		<Run>
			<Table>
				<HeadContent>
					<TableRow Active>
						<TableHead>#</TableHead>
						<TableHead>First</TableHead>
						<TableHead>Last</TableHead>
						<TableHead>Handle</TableHead>
					</TableRow>
				</HeadContent>
				<ChildContent>
					<TableRow>
						<TableHead>1</TableHead>
						<TableCell Active>Mark</TableCell>
						<TableCell>Otto</TableCell>
						<TableCell>@@mdo</TableCell>
					</TableRow>
					<TableRow>
						<TableHead Active>2</TableHead>
						<TableCell>Jacob</TableCell>
						<TableCell>Thornton</TableCell>
						<TableCell>@@fat</TableCell>
					</TableRow>
					<TableRow>
						<TableHead>3</TableHead>
						<TableCell ColSpan="2">Larry Bird</TableCell>
						<TableCell Active>@@twitter</TableCell>
					</TableRow>
				</ChildContent>
				<FootContent>
					<TableRow>
						<TableCell CssClass="Css.Text(Text.End)" ColSpan="4">
							Total : 3
						</TableCell>
					</TableRow>
				</FootContent>
			</Table>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Table>
	<TableRow Acive>...</TableRow>
	<TableRow>
		<TableHead Active>...</TableHead>
		<TableCell Active>...</TableCell>
	</TableRow>
</Table>
```
			")
		</Code>
	</Demo>
	<Demo Title="Bordered tables">
		<Description>
			Set <code>Bordered</code> for borders on all sides of the table and cells.
		</Description>
		<Run>
			<Table Bordered>
				<HeadContent>
					<TableRow>
						<TableHead>#</TableHead>
						<TableHead>First</TableHead>
						<TableHead>Last</TableHead>
						<TableHead>Handle</TableHead>
					</TableRow>
				</HeadContent>
				<ChildContent>
					<TableRow>
						<TableHead>1</TableHead>
						<TableCell>Mark</TableCell>
						<TableCell>Otto</TableCell>
						<TableCell>@@mdo</TableCell>
					</TableRow>
					<TableRow>
						<TableHead>2</TableHead>
						<TableCell>Jacob</TableCell>
						<TableCell>Thornton</TableCell>
						<TableCell>@@fat</TableCell>
					</TableRow>
					<TableRow>
						<TableHead>3</TableHead>
						<TableCell ColSpan="2">Larry Bird</TableCell>
						<TableCell>@@twitter</TableCell>
					</TableRow>
				</ChildContent>
				<FootContent>
					<TableRow>
						<TableCell CssClass="Css.Text(Text.End)" ColSpan="4">
							Total : 3
						</TableCell>
					</TableRow>
				</FootContent>
			</Table>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Table Bordered>
...
</Table>
```
			")
		</Code>
	</Demo>
	<Demo Title="Tables without borders">
		<Description>
			Set <code>Borderless</code> for a table without borders.
		</Description>
		<Run>
			<Table Borderless>
				<HeadContent>
					<TableRow>
						<TableHead>#</TableHead>
						<TableHead>First</TableHead>
						<TableHead>Last</TableHead>
						<TableHead>Handle</TableHead>
					</TableRow>
				</HeadContent>
				<ChildContent>
					<TableRow>
						<TableHead>1</TableHead>
						<TableCell>Mark</TableCell>
						<TableCell>Otto</TableCell>
						<TableCell>@@mdo</TableCell>
					</TableRow>
					<TableRow>
						<TableHead>2</TableHead>
						<TableCell>Jacob</TableCell>
						<TableCell>Thornton</TableCell>
						<TableCell>@@fat</TableCell>
					</TableRow>
					<TableRow>
						<TableHead>3</TableHead>
						<TableCell ColSpan="2">Larry Bird</TableCell>
						<TableCell>@@twitter</TableCell>
					</TableRow>
				</ChildContent>
				<FootContent>
					<TableRow>
						<TableCell CssClass="Css.Text(Text.End)" ColSpan="4">
							Total : 3
						</TableCell>
					</TableRow>
				</FootContent>
			</Table>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Table Borderless>
...
</Table>
```
			")
		</Code>
	</Demo>
	<Demo Title="Small tables">
		<Description>
			Add <code>Small</code> to make any <code>Table</code> more compact by cutting all cell <code>padding</code> in half.
		</Description>
		<Run>
			<Table Small>
				<HeadContent>
					<TableRow>
						<TableHead>#</TableHead>
						<TableHead>First</TableHead>
						<TableHead>Last</TableHead>
						<TableHead>Handle</TableHead>
					</TableRow>
				</HeadContent>
				<ChildContent>
					<TableRow>
						<TableHead>1</TableHead>
						<TableCell>Mark</TableCell>
						<TableCell>Otto</TableCell>
						<TableCell>@@mdo</TableCell>
					</TableRow>
					<TableRow>
						<TableHead>2</TableHead>
						<TableCell>Jacob</TableCell>
						<TableCell>Thornton</TableCell>
						<TableCell>@@fat</TableCell>
					</TableRow>
					<TableRow>
						<TableHead>3</TableHead>
						<TableCell ColSpan="2">Larry Bird</TableCell>
						<TableCell>@@twitter</TableCell>
					</TableRow>
				</ChildContent>
				<FootContent>
					<TableRow>
						<TableCell CssClass="Css.Text(Text.End)" ColSpan="4">
							Total : 3
						</TableCell>
					</TableRow>
				</FootContent>
			</Table>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Table Small>
...
</Table>
```
			")
		</Code>
	</Demo>
		<Demo Title="Vertical alignment">
		<Description>

		</Description>
		<Run>
			<Table>
				<HeadContent>
					<TableRow>
						<TableHead>Heading 1</TableHead>
						<TableHead>Heading 2</TableHead>
						<TableHead>Heading 3</TableHead>
						<TableHead style="width:150px">Heading 4</TableHead>
					</TableRow>
				</HeadContent>
				<ChildContent>
					<TableRow>
						<TableCell CssClass="Css.Class.VerticalAlign(VerticalAlign.Middle)">This cell inherits vertical-align: middle; from the table</TableCell>
						<TableCell CssClass="Css.Class.VerticalAlign(VerticalAlign.Middle)">This cell inherits vertical-align: middle; from the table</TableCell>
						<TableCell CssClass="Css.Class.VerticalAlign(VerticalAlign.Middle)">This cell inherits vertical-align: middle; from the table</TableCell>
						<TableCell>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</TableCell>
					</TableRow>
					
					<TableRow CssClass="Css.Class.VerticalAlign(VerticalAlign.Bottom)">
						<TableCell>This cell inherits vertical-align: bottom; from the table</TableCell>
						<TableCell>This cell inherits vertical-align: bottom; from the table</TableCell>
						<TableCell>This cell inherits vertical-align: bottom; from the table</TableCell>
						<TableCell>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</TableCell>
					</TableRow>
					
					<TableRow>
						<TableCell CssClass="Css.Class.VerticalAlign(VerticalAlign.Middle)">This cell inherits vertical-align: middle; from the table</TableCell>
						<TableCell CssClass="Css.Class.VerticalAlign(VerticalAlign.Middle)">This cell inherits vertical-align: middle; from the table</TableCell>
						<TableCell CssClass="Css.Class.VerticalAlign(VerticalAlign.Top)">This cell is aligned to the top.</TableCell>
						<TableCell>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</TableCell>
					</TableRow>
				</ChildContent>
			</Table>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Table>
	<TableRow CssClass=""Css.Class.VerticalAlign(VerticalAlign.Bottom)"">
		...
	</TableRow>
	<TableRow>
		<TableCell CssClass=""Css.Class.VerticalAlign(VerticalAlign.Middle)"">...</TableCell>
	</TableRow>
</Table>
```
			")
		</Code>
	</Demo>
		<Demo Title="Captions">
		<Description>
			A <code>CaptionContent</code> secment like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
		</Description>
		<Run>
			<Table>
				<CaptionContent>
					List of users
				</CaptionContent>
				<HeadContent>
					<TableRow>
						<TableHead>#</TableHead>
						<TableHead>First</TableHead>
						<TableHead>Last</TableHead>
						<TableHead>Handle</TableHead>
					</TableRow>
				</HeadContent>
				<ChildContent>
					<TableRow>
						<TableHead>1</TableHead>
						<TableCell>Mark</TableCell>
						<TableCell>Otto</TableCell>
						<TableCell>@@mdo</TableCell>
					</TableRow>
					<TableRow>
						<TableHead>2</TableHead>
						<TableCell>Jacob</TableCell>
						<TableCell>Thornton</TableCell>
						<TableCell>@@fat</TableCell>
					</TableRow>
					<TableRow>
						<TableHead>3</TableHead>
						<TableCell ColSpan="2">Larry Bird</TableCell>
						<TableCell>@@twitter</TableCell>
					</TableRow>
				</ChildContent>
				<FootContent>
					<TableRow>
						<TableCell CssClass="Css.Text(Text.End)" ColSpan="4">
							Total : 3
						</TableCell>
					</TableRow>
				</FootContent>
			</Table>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Table>
	<CaptionContent>
		List of users
	</CaptionContent>
	...
</Table>
```
			")
		</Code>
	</Demo>
			<Demo Title="">
		<Description>
			You can also put the caption on the top of the table with <code>CaptionTop</code>.
		</Description>
		<Run>
			<Table CaptionTop>
				<CaptionContent>
					List of users
				</CaptionContent>
				<HeadContent>
					<TableRow>
						<TableHead>#</TableHead>
						<TableHead>First</TableHead>
						<TableHead>Last</TableHead>
						<TableHead>Handle</TableHead>
					</TableRow>
				</HeadContent>
				<ChildContent>
					<TableRow>
						<TableHead>1</TableHead>
						<TableCell>Mark</TableCell>
						<TableCell>Otto</TableCell>
						<TableCell>@@mdo</TableCell>
					</TableRow>
					<TableRow>
						<TableHead>2</TableHead>
						<TableCell>Jacob</TableCell>
						<TableCell>Thornton</TableCell>
						<TableCell>@@fat</TableCell>
					</TableRow>
					<TableRow>
						<TableHead>3</TableHead>
						<TableCell ColSpan="2">Larry Bird</TableCell>
						<TableCell>@@twitter</TableCell>
					</TableRow>
				</ChildContent>
				<FootContent>
					<TableRow>
						<TableCell CssClass="Css.Text(Text.End)" ColSpan="4">
							Total : 3
						</TableCell>
					</TableRow>
				</FootContent>
			</Table>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Table CaptionTop>
	<CaptionContent>
		List of users
	</CaptionContent>
	...
</Table>
```
			")
		</Code>
	</Demo>
		<Demo Title="Responsive tables">
		<Description>
			Set <code>Responsive</code> for horizontally scrolling tables.
		</Description>
		<Run>
			<Table Responsive width="200px">
				<TableRow>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
				</TableRow>
				<TableRow>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
				</TableRow>
				<TableRow>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
					<TableCell>Cell</TableCell>
				</TableRow>
			</Table>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Table Responsive>
...
</Table>
```
			")
		</Code>
	</Demo>
</Pager>